<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Bike Shop 2.0</title>
    </h:head>
    
    <h:body>
		<h:outputStylesheet library="css" name="layout.css" target="head"/>
        <div id="container">
            <div id="top">
                <div id="flag"><h:graphicImage value="#{resource['images:country_flag.gif']}" /></div>
            	<table>
            		<tr>
            			<td>
            				<h:graphicImage value="#{resource['images:bike_logo.jpg']}" />
            			</td>
            			<td>
            				<h1><h:outputText value="#{msg['top.name']}" /></h1>
            			</td>
            		</tr>
            	</table>            	          
            </div>
            <div id="leftnav">
	            <h:form>
	            <h:outputText value="#{msg['left.categories.title']}" />
	                <p>
	                	<ul>                		
	                		<li>
	                			<h:commandLink action="#{bikesListBean.getBikes}" value="#{msg['left.categories.mtb']}" >
	                				<f:setPropertyActionListener target="#{bikesListBean.categoryId}" value="1" />
	                			</h:commandLink>
	                		</li>
	                		<li>
	                			<h:commandLink action="#{bikesListBean.getBikes}" value="#{msg['left.categories.trek']}" >
	                				<f:setPropertyActionListener target="#{bikesListBean.categoryId}" value="2" />
	                			</h:commandLink></li>
	                		<li>
	                			<h:commandLink action="#{bikesListBean.getBikes}" value="#{msg['left.categories.cross']}" >
	                				<f:setPropertyActionListener target="#{bikesListBean.categoryId}" value="3" />
	                			</h:commandLink>
	                		</li>
	                		<li>...</li>
	                		<br/>
	                		<br/>
	                		<br/>
	                	</ul>
	                </p>
	                <h:outputText value="Management:" />
	                <p>
	                	<ul>                		
	                		<li>
	                			<h:commandLink action="#{addBike.showForm}" value="#{msg['bikes.add.mtb']}">	
	                				<f:setPropertyActionListener target="#{addBike.categoryId}" value="1" />
	                			</h:commandLink>	
	                		</li>
	                		<li>
	                			<h:commandLink action="#{addBike.showForm}" value="#{msg['bikes.add.trek']}">	
	                				<f:setPropertyActionListener target="#{addBike.categoryId}" value="2" />
	                			</h:commandLink>	                				
	                		</li>
	                		<li>
	                			<h:commandLink action="#{addBike.showForm}" value="#{msg['bikes.add.cross']}">	
	                				<f:setPropertyActionListener target="#{addBike.categoryId}" value="3" />
	                			</h:commandLink>	                				
	                		</li>	                		
	                			                		
	                			                		
	                	</ul>
	                </p>
	                
	           
	            </h:form>
            </div>
            <div id="content">
                <ui:insert name="content" />
            </div>
            <div id="footer">
                ####
            </div>
        </div>
 
    </h:body>
    
</html>